<template>
  <div class="app-container" >
     <el-form label-width="120px" >   
      <el-form-item label="用户名">
        <el-col :span="8">
        <el-input v-model="consumer.username"/>
        </el-col>
      </el-form-item>
      <el-form-item label="密码">
        <el-col :span="8">
        <el-input v-model="consumer.password"/>
        </el-col>
      </el-form-item>
      <el-form-item label="昵称">
        <el-col :span="8">
        <el-input v-model="consumer.nickname"/>
        </el-col>
      </el-form-item>
      <el-form-item label="年龄">
        <el-col :span="8">
        <el-input v-model="consumer.age"/>
        </el-col>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="consumer.sex" clearable placeholder="请选择">
          <el-option :value=0 label="男"/>
          <el-option :value=1 label="女"/>
        </el-select>
      </el-form-item>
        <el-form-item label="手机号">
        <el-col :span="8">
        <el-input v-model="consumer.mobile"/>
        </el-col>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-col :span="8">
        <el-input v-model="consumer.email"/>
        </el-col>
      </el-form-item>
      <el-form-item label="权限">
        <el-select v-model="consumer.role" clearable placeholder="请选择">
          <el-option :value="0" label="admin"/>
          <el-option :value="1" label="ordinary"/>
          <el-option :value="2" label="author"/>
        </el-select>
      </el-form-item>
      
      <!-- 讲师头像：TODO -->
       <!-- 讲师头像 -->
      <el-form-item label="用户头像">

          <!-- 头衔缩略图 -->
          <pan-thumb :image="consumer.avatar"/>
          <!-- 文件上传按钮 -->
          <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
            <!-- imagecropperShow 设置为false 当值为true就弹框 -->
          </el-button>

          <!--
      v-show：是否显示上传组件
      :key：类似于id，如果一个页面多个图片上传控件，可以做区分
      :url：后台上传的url地址
      @close：关闭上传组件
      @crop-upload-success：上传成功后的回调 
        <input type="file" name="file"/>
      -->
          <image-cropper
                        v-show="imagecropperShow"
                        :width="300"
                        :height="300"
                        :key="imagecropperKey"
                        :url="BASE_API+'/useross/fileoss/avatar'"
                        field="file"
                        @close="close"
                        @crop-upload-success="cropSuccess"/>
      </el-form-item>


      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import consumer from '@/api/tingting/consumer'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  components:{
    ImageCropper,PanThumb
  },
    data(){
        return{
            consumer:{

            },
            imagecropperShow:false,
            imagecropperKey:0,
            BASE_API:process.env.BASE_API,
            saveBtnDisabled:false
        }
    },
    watch:{
        $route(to,from){//路由变化的方式，路由发生变化，方法就会执行
            this.init()
        }
    },
    created(){
        this.init()

    },
    methods:{
      close(){ //关闭上传弹框的方法
         this.imagecropperShow=false
         //上传组件初始化，解决一个小bug
         this.imagecropperKey=this.imagecropperKey+1
      },
      cropSuccess(data){//上传成功的方法
         this.imagecropperShow=false
         this.consumer.avatar=data.url
          this.imagecropperKey=this.imagecropperKey+1
      },
        init(){
            if(this.$route.params && this.$route.params.id){
                const id = this.$route.params.id
                this.getInfo(id)
            }else{
            this.consumer={}
        }
        },
        getInfo(id){
            consumer.getConsumerInfo(id)
            .then(response =>{
                this.consumer = response.data.consumer
            })
        },
        saveOrUpdate(){
            //判断是修改还是添加
            if(this.consumer.id){
                this.updateConsumer()
            }else{
                this.saveConsumer()
               
            }
            
        },

        //修改用户
        updateConsumer(){
            consumer.updateConsumer(this.consumer)
            .then(response => {
                this.$message({
                type: 'success',
                message: '修改成功!'
                });
                this.$router.push({path:'/consumer/table'})  
            })
        },

        //添加用户
        saveConsumer(){
            consumer.addConsumer(this.consumer)
            .then(response => {
               this.$message({
               type: 'success',
               message: '添加成功!'
               });
          //回到列表页面 路由跳转
               this.$router.push({path:'/consumer/table'})  
            })
        }
    }

}
</script>